﻿<%@ Page Title="Drop handle" Language="C#" MasterPageFile="~/Demo.master" StylesheetTheme="start"
    Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-help ui-corner-all" style="margin-bottom: 10px;">
        Allow dragging only when the cursor is over a specific part of the draggable Control.
        Use the <b>DragHandler</b> property to specify the jQuery server side selector of
        an Control (or group of Controls) used to drag the object.
        <p>
            Or prevent dragging when the cursor is over a specific control (or group of controls)
            within the draggable Control. Use the <b>DisableDraggingElements</b> property to
            specify a jQuery server side selector over which to cancel draggable functionality.</p>
    </div>
    <DotNetAge:CollapsablePanel ID="DraggHeaderPanel" runat="server" Width="200" Style="padding: 0.5em;
        float: left; margin: 0 10px 10px 0;" Title="Drag me with header">
        <ContentTempalte>
            <p style="margin: 10px" unselectable="on">
                I can be dragged only by my header</p>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    <DotNetAge:CollapsablePanel ID="DraggBodyPanel" runat="server" Width="200" Title="Drag me with body"
        Style="padding: 0.5em; float: left; margin: 0 10px 10px 0;">
        <ContentTempalte>
            <p style="margin: 10px" unselectable="on">
                I can be dragged only by my content body</p>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    <DotNetAge:Draggable ID="HeaderDraggable" runat="server">
        <Target TargetID="DraggHeaderPanel" />
        <DragHandler TargetID="DraggHeaderPanel>h3" />
        <DisableDraggingElements TargetID="DraggHeaderPanel>div" />
    </DotNetAge:Draggable>
    <DotNetAge:Draggable ID="ContentDraggable" runat="server">
        <Target TargetID="DraggBodyPanel" />
        <DisableDraggingElements TargetID="DraggBodyPanel>h3" />
    </DotNetAge:Draggable>
    <br />
    <div style="clear: left;">
    </div>
    <demo:Code runat="server" ID="codeView" SourceFile="~/Draggable/Codes/DragHandle.aspx" />
</asp:Content>
